<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>车平台详情</title>
    <!-- 引入 Element UI 的样式 -->
    <link rel="stylesheet" href="../../assets/css/element-ui.css" />
    <link rel="stylesheet" href="../../assets/css/styles.css" />
    <script src="../../assets/js/cdn.js"></script>
    <link rel="stylesheet" href="../../assets/fontawesome-free-6.7.2-web/css/all.min.css" />
  </head>
  <body>
    <div id="app">
      <lx-header slot="header" v-on:toggle="isToggle = !isToggle" :type="2"></lx-header>
      <div class="main-content">
        <div class="content" style="width: 100%">

          <h1 class="module-title">基本信息</h1>
          <div class="center-grid mb-20">
            <el-descriptions :column="4">
              <el-descriptions-item label="车平台名称">
                {{formInfo.carPlatformCode}}-{{formInfo.carPlatformName}}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <h1 class="module-title">车型号信息</h1>
          <div class="center-grid mb-20">
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain size="mini" @click="handleAdd">新增</el-button>
              </el-col>
            </el-row>
            <el-table v-loading="loading" :data="tableData">
              <el-table-column v-for="(item, index) in tableColumnData" :key="index" :label="item.fieldName" min-width="150" :width="item.width">
                <template slot-scope="scope">
                  <template v-if="item.fieldApi === 'carModelName'">
                    {{ scope.row.carModelCode  }}-{{ scope.row.carModelName  }}
                  </template>
                  <template v-else> {{ scope.row[item.fieldApi] }} </template>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <el-dialog title="添加车型号" :visible.sync="open" :fullscreen="true" width="800px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="车平台名称" prop="carPlatformName">
            <el-input v-model="form.carPlatformName" readonly></el-input>
          </el-form-item>
          <el-form-item label="车型号名称" prop="carModelName">
            <el-input v-model="form.carModelName" placeholder="请输入车型号名称"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <script src="../../assets/js/constant.js"></script>
    <script src="../../assets/js/utils.js"></script>
    <script src="../../assets/js/auth.js"></script>
    <script src="../../assets/js/axios.min.js"></script>
    <!-- 引入 Vue.js -->
    <script src="../../assets/js/vue.js"></script>
    <!-- 引入 Element UI 的 JS 文件 -->
    <script src="../../assets/js/element-ui.js"></script>

    <script type="module">
      import LxHeader from '../../pages/components/LxHeader/index.js'
      Vue.component('lx-header', LxHeader)
      checkAuthentication(2)
      new Vue({
        el: '#app',
        components: {},
        data() {
         return {
            currentUser: JSON.parse(localStorage.getItem('currentUser')) || {},
            userMenuList: JSON.parse(localStorage.getItem('userMenuList')) || [],
            form: {},
            // 表单校验
            rules: {},
            // 是否显示弹出层
            open: false,
            queryParams: {
              pageNo: 1,
              pageSize: 10,
              puCode: '',
              puName: ''
            },
            total: 0,
            tableData: [],
            tableColumnData: [
              {
                fieldName: '车型号名称',
                fieldApi: 'carModelName'
              },
              {
                fieldName: '创建时间',
                fieldApi: 'createTime'
              },
              {
                fieldName: '创建人',
                fieldApi: 'createBy'
              },
            ],
            // 遮罩层
            loading: true,
            businessCenters: [
                { name: '订单中心', path: '../index.html' },
                { name: '用户中心', path: '#' },
                { name: '产品中心', path: '#' },
                { name: '库存中心', path: '#' },
                { name: '财务中心', path: '#' },
                { name: '数据中心', path: '#' },
                { name: '系统中心', path: '#' },
                { name: '消息中心', path: '#' }
            ],
            baseInfoHeader: [
              { label: '车平台名称', fieldApi: 'carPlatformName' }
            ],
            optionsObj: [],
            formInfo: {},
            detailDialog: false, // 详情
            carPlatformCode: '',
            root_host: root_host,
            request_host: request_host
          }
        },
        created() {
            this.init()
        },
        methods: {
          exit,
          getList() {
            this.loading = true
            console.log(getUrlParameter('carPlatformCode'))
            this.queryParams.carPlatformCode = getUrlParameter('carPlatformCode')
            try {
              axios.get(`${this.request_host}/system/model/list`,{ params: this.queryParams }).then((response) => {
                if (response.status == 200) {
                  this.tableData = response.data.rows
                  this.total = response.data.total
                  this.loading = false
                }
              })
            } catch (error) {
              console.error('请求失败:', error)
            }
          },
          /** 新增按钮操作 */
          handleAdd() {
            this.resetQuery()
            this.open = true
          },
          resetQuery() {
            this.queryParams = {
              pageNo: 1,
              pageSize: 10,
              puCode: '',
              puName: ''
            }
          },
          /** 提交按钮 */
          submitForm() {
            this.$refs["form"].validate(valid => {
              if (valid) {
                if (!this.form.carModelCode){
                  // 新增
                  axios.post(`${this.request_host}/system/model`, this.form)
                          .then(response => {
                            if (response.data.code == 200){
                              this.$message.success("提交成功")
                              this.cancel();
                              this.getList()
                              const params = `carPlatformCode=`+response.data.data;
                              const url = `car_model_item.html?${params}`;
                              window.open(url, '_blank');
                            }else {
                              this.$message.error(response.data.msg)
                            }

                          })
                }else{
                  //修改提交
                  axios.put(`${this.request_host}/system/model`, this.form)
                          .then(response => {
                            if (response.data.code == 200){
                              this.$message.success("提交成功")
                              this.cancel();
                              this.getList();
                            }else {
                              this.$message.error(response.data.msg)
                            }

                          })
                  const params = `carPlatformCode=`+this.form.carPlatformCode;
                  const url = `car_model_item.html?${params}`;
                  window.open(url, '_blank');
                }

              }
            })
          },
          // 取消按钮
          cancel() {
            this.open = false
          },
          init() {
            this.carPlatformCode = getUrlParameter('carPlatformCode')
            this.form.carPlatformCode = this.carPlatformCode
            this.getDetails()
            this.getList()
          },
          getDetails() {
            // 这里替换为实际的API调用
            axios.get(`${this.request_host}/system/platform/` + this.carPlatformCode)
                .then(response => {
                  this.formInfo = response.data.data
                  this.form.carPlatformName = this.formInfo.carPlatformName
                });
          },
          openMenu(url) {
            window.open(url)
          },
        }
      })
    </script>
    <style>
      .el-table th.el-table__cell {
        background-color: #f2f2f2; /* 例如，设置为浅灰色 */
      }
    </style>
  </body>
</html>
